html,
body {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	overflow-y: auto;
}

.hair {
	position: absolute;
	text-align: center;
	width: 100vw;
	color: white;
	font-size: 18px
}

.face {
	width: 300vw;
	height: 200vw;
	background-color: #8e84ff;
	border-radius: 50%;
	position: absolute;
	left: -100vw;
	top: -165vw;
}

.ear {
	position: absolute;
	right: 0.8vw;
	top: 0.5vw;
	color: white
}

.ear2 {
	position: absolute;
	left: 0.8vw;
	top: 0.5vw;
	color: white
}

.neck {
	position: absolute;
	top: calc(35vw - 15px);
	text-align: center;
	width: 100%;
}

.tie {
	display: inline-block;
	background-color: white;
	color: #8e84ff;
	padding: 4px 5px;
	border-radius: 5px;
	box-shadow: 0 0 1px 0 gray;
}

.body {
	position: absolute;
	top: calc(35vw + 15px);
	width: 100%;
}

.body tr td,
.body>div {
	width: 33.3%;
	height: 125px;
	text-align: center;
	font-size: 15px;
	color: #454545;
	position: relative;
	border-bottom: solid 1px #e2e2e2;
}

.body>div {
	float: left;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	border-right: solid 1px #e2e2e2;
}

.body tr td:first-child {
	border-right: solid 1px #e2e2e2;
}

.body tr td:last-child {
	border-left: solid 1px #e2e2e2;
}

.body a {
	text-decoration: none;
	color: #9a9a9a;
}

.body tr td img,
.body>div img {
	padding-top: 15px;
	width: 28px;
	height: 28px;
}

.body p {
	line-height: 15px;
}

.avatar {
	width: 18vw;
	height: 18vw;
	border-radius: 50%;
}

.unread {
	position: absolute;
	top: 5%;
	right: 5%;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #e02d30;
	color: #fff;
	line-height: 18px;
	font-size: smaller;
}

[v-if] {
	display: none;
}